<template>
  <div style="margin-left: 2%;margin-right: 2%;margin-top: 10px">
    <el-card>
      <span style="font-size: 13px">项目编号：</span>
      <el-input v-model="projectSearch.projectCode" placeholder="请输入内容" style="width: 130px"></el-input>

      <span style="font-size: 13px;margin-left: 3%">项目名称：</span>
      <el-input v-model="projectSearch.projectName" placeholder="请输入内容" style="width: 130px"></el-input>


      <span style="font-size: 13px;margin-left: 3%">采购类别：</span>
      <el-select v-model="projectSearch.purchaseCategoryId" placeholder="请选择">
        <el-option label="货物类" value="1"></el-option>
        <el-option label="服务类" value="2"></el-option>
        <el-option label="工程类" value="3"></el-option>
      </el-select>

      <div style="display: inline;margin-left: 10%">
        <el-button size="mini" @click="searchCondition" type="primary">查询</el-button>
        <el-button size="mini" @click="clearMes">清空查询</el-button>
      </div>
    </el-card>
    <div style="margin-top: 10px;margin-bottom: 10px">
      <el-table
          :data="projectTable"
          border
          v-loading="loading"
          style="width: 100%">
        <el-table-column
            prop="projectCode"
            min-width="170px"
            label="项目编号"
        >
        </el-table-column>
        <el-table-column
            prop="projectName"
            min-width="150px"
            label="项目名称"
        >
        </el-table-column>
        <el-table-column
            prop="categoryName"
            min-width="130px"
            label="采购类别"
        >
        </el-table-column>
        <el-table-column
            prop="purchaseMethod"
            min-width="110px"
            label="采购方式">
        </el-table-column>
        <el-table-column
            prop="budget"
            min-width="110px"
            label="预算金额(元)">
        </el-table-column>
        <el-table-column
            prop="state"
            min-width="130px"
            label="成交合同审批状态">
        </el-table-column>
        <el-table-column
            prop="contractApproveTime"
            min-width="170px"
            label="审批通过时间">
        </el-table-column>
        <el-table-column
            prop="createTime"
            min-width="170px"
            label="创建时间">
        </el-table-column>
        <el-table-column
            width="120px"
            label="操作"
        >
          <template slot-scope="{$index, row}">
           <span
            :style="{
            textAlign: 'center',
            marginLeft: '7px',
            color: row.state === '已提交(审批通过)' ? '#409eff' : 'gray'
          }"
          @click="projectManage(row)"
           >
           项目验收管理
          </span>
          </template>

        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="theData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog
        title="项目验收管理"
        :visible.sync="centerDialogVisible"
        width="75%"
        center
        :show-close="false"
    >
      <project-acceptance-manage
          :projectInfo="projectInfo"
          :acceptanceTable="acceptanceTable"
      />
      <div slot="footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import ProjectAcceptanceManage from "@/components/projectAcceptanceManage/index.vue"
import {
  getAcceptance,
    getAllProject,
    searchProject,
    deleteProject,
    downloadProject,
    sumbitProject
} from "@/api/projectAcceptance";

export default {
  name: "projectAcceptance",
  data() {
    return {
      projectSearch: {
        projectName: "",
        projectCode: "",
        purchaseCategoryId: "",
      },
      theData:{
        page: 1,
        pageSize: 20,
      },
      projectTable: [],
      loading: true, // 修改是否显示加载页面
      currentPage: 1,
      total: 0,
      pageSize: 20,
      centerDialogVisible: false,
      // 传给子组件的对象
      projectInfo:{
        projectId:"",
        projectCode:"",
        projectName: "",
        categoryName: "",
        budget:"",
        accSubstatus:"",
        archiveSubmitStatus:"",
        accApproveStatus:"",
      },
      acceptanceTable: [], //获得验收资料
      pageflag:false,//判断查询页面参数

    }
  },
  mounted() {
    this.searchCondition();
  },
  methods: {
    // //获取所有项目
    // async getAllproject(){
    //   let theDate = {
    //     page: this.currentPage,
    //     pageSize: this.pageSize,
    //     projectCode: this.projectSearch.projectCode,
    //     projectName: this.projectSearch.projectName,
    //     purchaseCategoryId: this.projectSearch.purchaseCategoryId
    //   }
    //   let res =await getAllProject(theDate)
    //   console.log("resssssssssssss"+res)
    //   if (res){
    //     this.loading = false
    //   }
    //   if (res.data.code === 200){
    //     this.projectTable = res.data.data.projectVos;
    //     console.log("table"+this.projectTable)
    //     this.total = res.data.data.total
    //
    //   }else {
    //     this.projectTable = [];
    //     this.total = 0;
    //     this.$message(res.data.msg);
    //   }
    // },
    closeDialog() {
      this.centerDialogVisible = false;
      // 触发刷新页面的逻辑
      this.searchCondition();
    },
    clearMes() {
      Object.keys(this.projectSearch).forEach(index => this.projectSearch[index] = '')
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.searchCondition();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.pageflag = true;
      this.searchCondition()
    },
    // 请求获得返回的项目
    async searchCondition(){
      let theDates = {
        page: this.currentPage,
        pageSize: this.pageSize,
        projectCode: this.projectSearch.projectCode,
        projectName: this.projectSearch.projectName || '',
        purchaseCategoryId: this.projectSearch.purchaseCategoryId
      }
      console.log("page"+this.pageflag)
      if(!this.pageflag){
        this.currentPage = 1;
      }
      let pageInfo = this.currentPage + "/" + this.theData.pageSize
      let res = await searchProject(pageInfo,theDates)
      // let res = await getAllProject(theDate)
      if (res){
        this.loading = false
      }
      if (res.data.code === 200){
        this.projectTable = res.data.data.projectVos;
        console.log("table"+this.projectTable)
        this.total = res.data.data.total
      }else {
        this.projectTable = [];
        this.total = 0;
        this.$message(res.data.msg);
      }
      // console.log("cccccccccccccccc"+this.currentPage)
      this.pageflag = false
    },
    // 点击项目管理之后
    async projectManage(row) {
      if (row.state === "已提交(审批通过)"){

      this.projectInfo.projectId = row.projectId;
        this.projectInfo.projectCode = row.projectCode;
        this.projectInfo.projectName = row.projectName;
        this.projectInfo.categoryName = row.categoryName;
        this.projectInfo.budget = row.budget;
        this.projectInfo.accSubstatus=row.accSubstatus;
        this.projectInfo.archiveSubmitStatus = row.archiveSubmitStatus;
        this.projectInfo.accApproveStatus = row.accApproveStatus;
        this.centerDialogVisible = true

        console.log("ssssssssssssssss"+row.accSubstatus)

        let res = await getAcceptance(row.projectId)
        if (res.data.code === 200){
          this.acceptanceTable = res.data.data;
        }else {
          this.$message.error(res.data.msg)
        }
      }
      else {
        alert("成交合同审批未通过")
      }

    },

  },
  components: {
    ProjectAcceptanceManage,
  },

}
</script>

<style scoped>

</style>
